<template>
  <div class="login-page">
    <!-- 登录头部 -->
    <div class="login-header">
      <div class="logo">
        <img src="http://www.sz56t.com:8082/newpage/images/hl.png" alt="Logo" style="height: 40px;">
        <span>&nbsp;&nbsp;&nbsp;网页1183221-会员登录</span>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
      <div class="center-content">
        <!-- 地球图像区域 -->
        <div class="earth-container">
          <div class="globe">
            <img src="http://www.sz56t.com:8082/img/lg_bj.png" alt="Login Image" style="width: 520px; height: 400px;">
          </div>
        </div>
        
        <!-- 登录表单区域 -->
        <div class="login-form-container">
          <div class="form-content">
            <div class="form-title">登录</div>
            
            <!-- 用户名输入框 -->
            <div class="form-group">
              <input 
                type="text" 
                v-model="username" 
                placeholder="用户名" 
                :disabled="loading"
                @keyup="handleKeyPress"
                autocomplete="username"
              >
            </div>
            
            <!-- 密码输入框 -->
            <div class="form-group">
              <input 
                type="password" 
                v-model="password" 
                placeholder="密码" 
                :disabled="loading"
                @keyup="handleKeyPress"
                autocomplete="current-password"
              >
            </div>
            
            <!-- 错误消息显示 -->
            <div v-if="errorMessage" class="error-message">
              {{ errorMessage }}
            </div>
            
            <!-- 登录按钮 -->
            <button 
              @click="login" 
              class="login-button"
              :disabled="loading"
            >
              {{ loading ? '登录中...' : '登录' }}
            </button>
            
            <!-- 注册链接 -->
            <div class="forgot-password">
              <a href="#" @click.prevent="goToRegister">还没有账号？免费注册 &gt;</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
      <p>技术支持：XX科技   服务热线：0755-XXXXXXX <a href="http://www.XXX.com" target="_blank">www.jdddf.com</a></p>
    </div>
    
    <!-- 加载状态覆盖层 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <p>正在登录，请稍候...</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  name: 'LoginPage',
  setup() {
    // 响应式数据
    const username = ref('');
    const password = ref('');
    const loading = ref(false);
    const errorMessage = ref('');
    
    // 登录方法
    const login = async () => {
      // 重置错误消息
      errorMessage.value = '';
      
      // 表单验证
      if (!username.value.trim()) {
        errorMessage.value = '请输入用户名';
        return;
      }
      
      if (!password.value) {
        errorMessage.value = '请输入密码';
        return;
      }
      
      // 显示加载状态
      loading.value = true;
      
      try {
        // 发送登录请求到后端API
        const response = await axios.post('/api/auth/login', {
          username: username.value,
          password: password.value
        });
        
        // 登录成功后，保存token或用户信息
        if (response.data && response.data.token) {
          localStorage.setItem('token', response.data.token);
        }
        
        // 显示成功消息
        alert('登录成功！');
        
        // 跳转到仪表盘页面
        window.location.href = '/dashboard.html';
      } catch (error) {
        // 处理错误
        if (error.response && error.response.data) {
          errorMessage.value = error.response.data.message || '登录失败，请重试';
        } else if (error.request) {
          errorMessage.value = '网络错误，请检查您的网络连接';
        } else {
          errorMessage.value = '请求配置错误';
        }
        
        // 显示错误消息
        alert(errorMessage.value);
      } finally {
        // 隐藏加载状态
        loading.value = false;
      }
    };
    
    // 表单重置方法
    const resetForm = () => {
      username.value = '';
      password.value = '';
      errorMessage.value = '';
    };
    
    // 处理键盘事件
    const handleKeyPress = (event) => {
      if (event.key === 'Enter') {
        login();
      }
    };
    
    // 跳转到注册页面
    const goToRegister = () => {
      // 这里可以根据实际情况修改跳转到注册页面的逻辑
      alert('即将跳转到注册页面');
      // 实际应用中可以使用以下代码跳转到注册页面
      // window.location.href = '/register.html';
    };
    
    // 暴露给模板的数据和方法
    return {
      username,
      password,
      loading,
      errorMessage,
      login,
      resetForm,
      handleKeyPress,
      goToRegister
    };
  }
};
</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 登录头部样式 */
.login-header {
  background-color: #0073cf;
  color: white;
  padding: 7px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-header .logo {
  display: flex;
  align-items: center;
  font-size: 28px;
}

/* 内容区域样式 */
.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.center-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 900px;
  align-items: center;
}

/* 地球容器样式 */
.earth-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.globe {
  position: relative;
  margin-bottom: 20px;
}

/* 登录表单容器样式 */
.login-form-container {
  width: 410px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 表单内容样式 */
.form-content {
  width: 100%;
}

.form-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #0073cf;
}

.form-group {
  margin-bottom: 15px;
  width: 100%;
}

.form-group input {
  width: 100%;
  height: 36px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: url('http://www.sz56t.com:8082/img/user.png') no-repeat 8px center;
  padding-left: 30px;
}

.form-group:nth-child(2) input {
  background: url('http://www.sz56t.com:8082/img/password.png') no-repeat 8px center;
  padding-left: 30px;
}

.form-group input:focus {
  outline: none;
  border-color: #0073cf;
}

/* 登录按钮样式 */
.login-button {
  width: 100%;
  height: 40px;
  background-color: #FF6700;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.login-button:hover:not(:disabled) {
  background-color: #E55B00;
}

.login-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.forgot-password {
  text-align: center;
  margin-top: 15px;
}

.forgot-password a {
  color: #0073cf;
  text-decoration: none;
  font-size: 12px;
}

.forgot-password a:hover {
  text-decoration: underline;
}

/* 页脚样式 */
.footer {
  background-color: #f5f5f5;
  padding: 10px 0;
  text-align: center;
  color: #666;
  font-size: 12px;
}

.footer a {
  color: #0073cf;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* 加载状态样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.spinner {
  border: 4px solid rgba(0, 115, 207, 0.3);
  border-radius: 50%;
  border-top: 4px solid #0073cf;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误消息样式 */
.error-message {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  text-align: center;
}
</style>